<template>
  <div class="admin-layout">
    <n-layout has-sider>
      <n-layout-sider
        collapse-mode="width"
        :collapsed-width="64"
        :width="240"
        :collapsed="collapsed"
        show-trigger
        @collapse="collapsed = true"
        @expand="collapsed = false"
        bordered
      >
        <div class="admin-sidebar">
          <div class="logo">
            <h2 v-if="!collapsed">简历管理系统</h2>
            <n-icon v-else size="24" color="#ff85a2">
              <DocumentTextOutline />
            </n-icon>
          </div>
          
          <n-menu
            :collapsed="collapsed"
            :collapsed-width="64"
            :collapsed-icon-size="22"
            :options="menuOptions"
            :value="activeKey"
            @update:value="handleMenuUpdate"
          />
          
          <div class="logout-btn">
            <n-button quaternary @click="handleLogout">
              <template #icon>
                <n-icon>
                  <LogOutOutline />
                </n-icon>
              </template>
              <span v-if="!collapsed">退出登录</span>
            </n-button>
          </div>
        </div>
      </n-layout-sider>
      
      <n-layout class="right-layout">
        <n-layout-header bordered>
          <div class="admin-header">
            <div class="header-title">
              <n-breadcrumb>
                <n-breadcrumb-item>管理后台</n-breadcrumb-item>
                <n-breadcrumb-item>{{ pageTitle }}</n-breadcrumb-item>
              </n-breadcrumb>
            </div>
            <div class="header-user">
              <n-dropdown :options="userOptions" @select="handleUserAction">
                <div class="user-info">
                  <img round size="small" src="../../assets/images/avatar.jpg" style="width: 30px; height: 30px;border-radius: 50%;"></img>
                  <span class="username">{{ username }}</span>
                </div>
              </n-dropdown>
            </div>
          </div>
        </n-layout-header>
        
        <n-layout-content class="admin-content">
          <router-view />
        </n-layout-content>
        
        <n-layout-footer bordered>
          <div class="admin-footer">
            <p>© {{ new Date().getFullYear() }} 伍月简历管理系统</p>
          </div>
        </n-layout-footer>
      </n-layout>
    </n-layout>
  </div>
</template>

<script setup>
import { h, ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useDialog, useMessage } from 'naive-ui'
import { 
  GridOutline,
  LinkOutline,
  PeopleOutline,
  LogOutOutline,
  PersonOutline,
  DocumentTextOutline
} from '@vicons/ionicons5'
import adminApi from '../../api/admin'

const router = useRouter()
const route = useRoute()
const dialog = useDialog()
const message = useMessage()

const collapsed = ref(false)
const username = ref('管理员')

// 菜单选项
const menuOptions = [
  {
    label: '仪表盘',
    key: 'dashboard',
    icon: renderIcon(GridOutline)
  },
  {
    label: '链接管理',
    key: 'links',
    icon: renderIcon(LinkOutline)
  },
  {
    label: '简历管理',
    key: 'applicants',
    icon: renderIcon(PeopleOutline)
  }
]

// 用户下拉菜单选项
const userOptions = [
  {
    label: '修改密码',
    key: 'changePassword',
    icon: renderIcon(PersonOutline)
  },
  {
    label: '退出登录',
    key: 'logout',
    icon: renderIcon(LogOutOutline)
  }
]

// 当前激活的菜单项
const activeKey = computed(() => {
  const path = route.path
  if (path.includes('/admin/dashboard')) return 'dashboard'
  if (path.includes('/admin/links')) return 'links'
  if (path.includes('/admin/applicants')) return 'applicants'
  return 'dashboard'
})

// 页面标题
const pageTitle = computed(() => {
  switch (activeKey.value) {
    case 'dashboard': return '仪表盘'
    case 'links': return '链接管理'
    case 'applicants': return '简历管理'
    default: return '仪表盘'
  }
})

// 渲染图标
function renderIcon(icon) {
  return () => h(icon)
}

// 菜单点击处理
const handleMenuUpdate = (key) => {
  router.push(`/admin/${key}`)
}

// 用户操作处理
const handleUserAction = (key) => {
  if (key === 'logout') {
    handleLogout()
  } else if (key === 'changePassword') {
    message.info('修改密码功能暂未实现')
  }
}

// 退出登录
const handleLogout = () => {
  dialog.warning({
    title: '确认退出',
    content: '确定要退出登录吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      localStorage.removeItem('token')
      router.push('/login')
      message.success('已退出登录')
    }
  })
}

// 获取用户信息
const getUserInfo = async () => {
  try {
    const res = await adminApi.getInfo()
    username.value = res.username || '管理员'
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

onMounted(() => {
  getUserInfo()
})
</script>

<style scoped>

.admin-sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.logo {
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 64px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.logo h2 {
  color: var(--primary-color);
  margin: 0;
  font-size: 18px;
}

.logout-btn {
  margin-top: auto;
  padding: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.admin-header {
  height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.username {
  margin-left: 8px;
}

.admin-content {
  padding: 24px;
  min-height: calc(100vh - 64px - 50px);
}

.admin-footer {
  text-align: center;
  padding: 16px 0;
  color: #666;
}
</style> 